<template>
	<view class="content">
		
		<uni-nav-bar fixed="true" statusBar="true" leftIcon="back" @clickLeft="returnPage" class="gc-nav">
				<text style="font-size: 36rpx; overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;">{{keywords}}</text>
				<template v-slot:right >
					<view style="color: #366DE1; font-size: 16px;"  @click="togglePopup('top', 'operation')">
						操作
					</view>
					
				</template>
			</uni-nav-bar>
			<sl-filter :topFixed="true" :color="titleColor" :themeColor="themeColor" :isTransNav="true" :navHeight="0":menuList="menuList" v-model:topHeight="topHeight" @result="result" class="xiala"></sl-filter>
		
		

		<view class="list-container">
			<view class="gclist-cell" v-for="(value, key) in listData" :key="key">
				<view class="gclist-cell-list" :style="isInArray(clickedid,value.id)?'background-color:#f2f2f2':''">
					<view class="gclist-list-title list-ellipsis-h">
						<!-- <label>
							<checkbox value="cb" color="#4f97fe" style="transform:scale(0.5)" />
						</label> -->
						<text @click="navToDetails(value)">{{value.title}}</text>

					</view>
					<view class="gclist-list-body" @click="navToDetails(value)">
						<view class="gclist-bodyL">
							<text class="gclist-jd">【{{value.jieduanStr}}】</text>
							<text class="gclist-time">{{value.time}}</text>
						</view>
						<view class="gclist-body-line">
							<view class="line-before"></view>
							<view class="line-dot"></view>
							<view class="line-before"></view>
						</view>
						<view class="gclist-body-text list-ellipsis-h">
							{{value.contentText}}
						</view>
					</view>
					<view class="gclist-list-conditions">
						<text class="condition-item" v-if="value.hangyeStr !==''">{{value.hangyeStr}}</text>
						<text class="condition-item item-genjin">{{value.genjincount}}人跟进</text>
						<text class="condition-item">{{value.typeStr}}</text>
						<text class="condition-item">{{value.diqu}}</text>
					</view>
					<view class="gclist-list-bottom">
						<view class="gclist-area">
							<image src="/static/img/home/tubiao_17.png" class="image"></image> <text
								class="text-gray">{{value.diqucity}}</text>
						</view>
						<view class="gclist-area" v-if="value.time!=''">
							<image src="/static/img/home/tubiao_19.png" class="image"></image> <text
								class="text-red">{{value.time}}</text>
						</view>
						<view class="gclist-area">
							<text class="text-yellow">{{value.typeStr}}</text>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		</view>
		<!-- 操作 -->
		<uni-popup ref="showoperation" :type="type">
			<view class="operation-popup">
				<view class="operation-box">
					<text class="sanjiao"></text>
					<view class="operation-body">
						<view class="operation-item" @click="modify">
							<image class="operation-icon" src="/static/img/custom/bianji-icon.png"></image> 定制
						</view>
						<!-- <view class="operation-item" @click="togglePopup('center', 'image')" style="display: none;">
							<image class="operation-icon" src="/static/img/custom/daochu-icon.png"></image> 导出
						</view> -->
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 导出 -->
		<uni-popup ref="showimage" :type="type" :mask-click="true">
			<view class="youxiang-pop">
				<view class="youxiang-pop_content">
					<image src="/static/img/Details/youxiang.png" class="youxiang_img"></image>
					<view class="youxiang_text1">还差一步</view>
					<view class="youxiang_text2">输入邮箱即可继续发送</view>
					<view class="youxiang_input">
						<input type="text" placeholder="请填写您的邮箱" placeholder-style="color:#bebec1;" />
					</view>
					<view class="export-checkbox">
						<label>
							<checkbox value="" checked="true" color="#3b8bfe" style="transform:scale(0.7)" /> 导出是否包含内容
						</label>
					</view>
					<view class="youxiang-btn">确认并导出</view>
					<view class="youxiang-tips">
						<view style="color: #f8080e;">温馨提示：</view>
						<view>输入邮箱后，如果长时间没有收到邮件请检查您的垃圾箱或重新发送</view>
					</view>
				</view>
				<view class="huiyuan_close" @click="cancel('image')">
					<image src="/static/img/Details/huiyuan_close.png"></image>
				</view>
			</view>
		</uni-popup>
		<!-- 发送成功 -->
		<view class="export-success" style="display: none;">
			<image src="/static/img/custom/success.png" class="export-successimg"></image>
			<view class="export-text1">发送成功</view>
			<view class="export-text2">已结发送到您的邮箱，请查收！</view>
			<view class="youxiang-tips">
				<view style="color: #f8080e; margin-bottom: 10rpx;">温馨提示：</view>
				<view>输入邮箱后，如果长时间没有收到邮件请检查您的垃圾箱或重新发送</view>
			</view>
		</view>
		<view class="editor-bottom" style="display: none;">
			<view class="editor-bottom-btn1">取消</view>
			<view class="editor-bottom-btn2">确定<text style="font-size: 26rpx;">（已选中20条）</text></view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "uniicons",
		'src': "url('/static/uni.ttf')"
	});
	// #endif
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import slFilter from '@/components/gc-filter/sl-filter.vue';
	import data_menulists from '@/common/static/data-menulists.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	var dingyueid = 0;
	export default {
		components: {
			uniNavBar,
			slFilter,
			uniLoadMore,
			uniPopup
		},
		data() {
			return {
				type: '',
				iconopen: true,
				themeColor: '#eaf2ff',
				titleColor: '#2f69e0',
				filterResult: '',
				pagesize: 20,
				pageindex: 1,
				menuList: [data_menulists[1], data_menulists[0],data_menulists[4]],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				listData: [],
				area: [],
				jieduan: [],
				xmtype: [],
				keywords: '',
				nexttoken: '',
				clickedid: [],
				times:'',
				endtime:'',
				
			}
		},
		onLoad: function(options) {
			console.log(options);
			console.log(this.menuList,'123')
			
			dingyueid = options.id;
			if (options.keyword != '' && options.keyword != undefined) {
				this.keywords = options.keyword;
			}
			this.checkLogin(1);
			if (this.currUser.islogin) {
				if (dingyueid <= 0 || dingyueid == undefined) {
					this.getSearchList("refresh");
				} else {
					this.getList("refresh");
				}
			}
			
			
		},
		  
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			if (this.filterResult != '') {
				this.getSearchList("refresh");
			} else if (dingyueid > 0) {
				this.getList("refresh");
			} else {
				this.getSearchList("refresh");
			}
		},
		onReachBottom() {
			this.status = 'more';
			if (this.filterResult != '') {
				this.getSearchList("add");
			} else if (dingyueid > 0) {
				this.getList("add");
			} else {
				this.getSearchList("add");
			}
		},
		onUnload() {
			uni.hideNavigationBarLoading(); //关闭加载动画
		},
		methods: {
			returnPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			getList(type) {
				console.log('getList')
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (this.status === "noMore") {
						return;
					}
					this.status = "loading";
				}
				if (type === 'refresh') {
					//this.listData = []; //刷新前清空数组
					this.status = "loading";
					uni.showNavigationBarLoading();
					this.pageindex = "1";
					this.nexttoken = '';
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					});
				}
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 5127;
				data.id = dingyueid;
				data.pagesize = this.pagesize;
				data.page = this.pageindex;
				data.nexttoken = this.nexttoken;
				uni.request({
					url: this.baseConfig.serverURL + 'User/custom/xmResultHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								this.status = "noMore";
								uni.stopPullDownRefresh();
								uni.hideNavigationBarLoading(); //关闭加载动画
								return;
							} else {
								//获取成功，绑定
								let list = res.data.other2.list;
								if (list == undefined || list == '' || list.length <= 0) {
									this.status = "noMore";
									uni.stopPullDownRefresh();
									uni.hideNavigationBarLoading(); //关闭加载动画
									return;
								}
								console.log(list)
								this.nexttoken = res.data.other2.nexttoken;
								if (type === 'refresh') {
									this.listData = []; //刷新前清空数组
								}
								list.forEach(item => {
									item.time = item.time.split('T')[0];
									this.listData.push(item);
								})
								this.status = "more";
								if (list.length < this.pagesize) {
									this.status = "noMore";
								}
								this.pageindex++;
								uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
								uni.hideNavigationBarLoading();
							}
						} else {
							uni.showToast({
								title: '获取失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取失败，可能已超时！',
							icon: "none"
						});
					}
				})
			},
			addDate() {
                    let nowDate = new Date();
                    let date = {
                        year: nowDate.getFullYear(),
                        month: nowDate.getMonth() + 1,
                        date: nowDate.getDate(),
                    }
                    //console.log(date);
                    let systemDate = date.year + '-' + 0 + date.month + '-'  + date.date;
					this.endtime = systemDate
            },
			getSearchList(type) {
				this.addDate();
				
				console.log('search')
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (this.status === "noMore") {
						return;
					}
					this.status = "loading";
				}

				if (type === 'refresh') {
					//this.listData = []; //刷新前清空数组
					this.status = "loading";
					uni.showNavigationBarLoading();
					this.pageindex = "1";
					this.nexttoken = '';
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					});
				}

				// if (this.isInArray(this.xmtype, "0")) {
				// 	this.xmtype = this.xmtype.filter(item => {
				// 		return item != '0';
				// 	})
				// }
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 5127;
				data.pagesize = this.pagesize;
				data.page = this.pageindex;
				data.nexttoken = this.nexttoken;
				data.areas = this.area.toString();
				data.jieduancode = this.jieduan.toString();
				//data.hangye = this.xmtype.toString();
				data.timetype = 0
				data.starttime = this.times
				data.endtime = this.times
				console.log(data)
				uni.request({
					url: this.baseConfig.serverURL + 'User/custom/xmSearchHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						//console.log(res);
						if (type === 'refresh') {
							this.listData = []; //刷新前清空数组
						}
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								this.status = "more";
								uni.stopPullDownRefresh();
								uni.hideNavigationBarLoading(); //关闭加载动画
								return;
							} else {
								//获取成功，绑定
								let list = res.data.other2.list;
								if (list == undefined || list == '' || list.length <= 0) {
									console.log("没数据了");
									this.status = "noMore";
									uni.stopPullDownRefresh();
									uni.hideNavigationBarLoading(); //关闭加载动画
									return;
								}
								this.nexttoken = res.data.other2.nexttoken;

								list.forEach(item => {
									item.time = item.time.split('T')[0];
									this.listData.push(item);
								})
								this.status = "more";
								if (list.length < this.pagesize) {
									this.status = "noMore";
								}
								this.pageindex++;
								uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
								uni.hideNavigationBarLoading();
							}
						} else {
							uni.showToast({
								title: '获取失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取失败，可能已超时！',
							icon: "none"
						});
					}
				})
			},
			result(val) {
				console.log(val);
				this.area = val.diqu;
				this.jieduan = val.jieduan;
				this.xmtype = val.xmtype;
				this.times = val.time;
				console.log(this.times);
				console.log('filter_result:' + JSON.stringify(val));
				this.filterResult = JSON.stringify(val, null, 2)
				if (this.filterResult != '') {
					this.getSearchList("refresh");
				} else if (dingyueid > 0) {
					this.getList("refresh");
				} else {
					this.getSearchList("refresh");
				}
			},
			isInArray(arr, value) {
				for (var i = 0; i < arr.length; i++) {
					if (value === arr[i]) {
						return true;
					}
				}
				return false;
			},
			//详情
			navToDetails(item) {
				this.clickedid.push(item.id);
				let uri = encodeURIComponent(JSON.stringify(item));
				switch (item.type) {
					case 3:
					case 10:
					case 11:
					case 12:
					case 13:
					case 14:
					case 98:
					case 99:
						uni.navigateTo({
							url: '/pages/xiangmu/detail?ly=gclist&data=' + encodeURIComponent(uri)
						})
						break;
					default:
						uni.navigateTo({
							url: '/pages/zhaobiao/detail?ly=gclist&data=' + encodeURIComponent(uri)
						})
						break;
				}
			},
			togglePopup(type, open) {
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open();

				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			modify() {
				uni.navigateTo({
					url: '/pages/user/custom/choose/choose?id=' + dingyueid + '&isaddorupdate=2&type=1'
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/custom/dylist.scss";

	.list-container {
		padding: 20rpx 0;
	}

	.text-red {
		color: #fe3b3b;
	}

	.text-green {
		color: #41c474;
	}

	.text-blue {
		color: #358fff;
	}

	.text-gray {
		color: #d5d5d5;
	}

	.text-yellow {
		color: #ff8427;
	}

	.list-ellipsis-h {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.gclist-cell {
		display: flex;
		width: 100%;
		flex-direction: column;

		.gclist-cell-list {
			background-color: #fff;
			padding-top: 20rpx;

			.gclist-list-title {
				font-size: 32rpx;
				margin: 0 30rpx;

				.news-circle {
					width: 14rpx;
					height: 14rpx;
					border-radius: 100rpx;
					background-color: #fb6550;
					display: inline-block;
					margin-right: 5px;
				}
			}

			.gclist-list-body {
				display: flex;
				flex-direction: row;
				margin: 15rpx 30rpx;
				align-items: center;
				height: 80rpx;
				overflow: hidden;

				.gclist-bodyL {
					display: flex;
					flex-direction: column;

					.gclist-jd {
						font-size: 26rpx;
						color: #fe5c5c;
					}

					.gclist-time {
						font-size: 26rpx;
						color: #888888;
						margin-top: 10rpx;
					}
				}

				.gclist-body-line {
					position: relative;
					display: flex;
					align-items: center;
					flex-direction: column;
					margin: 0 25rpx 0 15rpx;

					.line-before {
						height: 30rpx;
						width: 1px;
						background-color: #d5d5d5;
					}

					.line-dot {
						width: 10rpx;
						height: 10rpx;
						border-radius: 10px;
						background-color: #d5d5d5;
						margin: 7rpx 0;
					}
				}

				.gclist-body-text {
					font-size: 26rpx;
					color: #6f6f6f;
					flex: 1;
					line-height: 1.5;
				}

			}

			.gclist-list-conditions {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: wrap;
				margin: 0 15rpx 20rpx;

				.condition-item {
					padding: 10rpx 15rpx;
					border-radius: 5rpx;
					margin: 10rpx 15rpx;
					background-color: #eff0f4;
					color: #5e6a93;
					font-size: 24rpx;
				}

				.item-genjin {
					background-color: #eaf4ff;
					color: #358fff;
				}
			}

			.gclist-list-bottom {
				display: flex;
				flex-direction: row;
				align-items: center;
				border-top: 1px solid #ededed;
				padding: 20rpx 0;

				.gclist-area {
					margin-left: 30rpx;
					font-size: 28rpx;
					display: flex;
					align-items: center;

					.image {
						width: 42rpx;
						height: 40rpx;
						vertical-align: text-top;
						margin-right: 10rpx;
					}
				}
			}

		}
	}

	.editor-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		align-items: center;

		.editor-bottom-btn1 {
			width: 40%;
			text-align: center;
			color: #555555;
			background-color: #FFFFFF;
			padding: 30rpx 0;
		}

		.editor-bottom-btn2 {
			text-align: center;
			flex: 1 1 0%;
			padding: 30rpx 0;
		}
	}
	
	.gclist-nav ::v-deep .u-navbar__content__right__text{
		color: #366DE1;
		font-size: 30rpx;
	}
	.gclist-nav{
		height: 44px;
	}
</style>
